<template>
  <div>About</div>
  <span>展示count ： {{ $store.state.count }}</span>
  <br />
  <button @click="add()">加</button>
  <button @click="add(10)">加 10</button>
  <br />
  <button @click="del()">减去</button>
  <button @click="del(10)">减去10</button>
  <br />
  <button @click="btnClick">获取action的返回值</button>
</template>

<script>
import { mapActions, useStore } from 'vuex'
import useMapActionstoSetup from '../hooks/useMapActionstoSetup'
export default {
  setup() {
    const { incrementAction, decrementAction } = mapActions(['incrementAction', 'decrementAction'])
    const add = incrementAction.bind({ $store: useStore() })

    const { del, newPromoseActions } = useMapActionstoSetup({
      del: 'decrementAction',
      newPromoseActions: 'newPromoseActions',
    })
    const btnClick = async () => {
      // 此时就可以拿到对应的action的派发成功或者失败的状态
      // newPromoseActions()
      //   .then(res => {
      //     console.log(res)
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
      const res = await newPromoseActions()
      console.log(res)
    }
    return {
      del,
      btnClick,
      add,
    }
  },
}
</script>

<style lang="scss" scoped></style>
